<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="{% url 'index' %}" >
        <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
        </span>
        <span class="nav-link-title">
          Home
        </span>
      </a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
        <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
        </span>
        <span class="nav-link-title">
          Interface
        </span>
      </a>
      <div class="dropdown-menu">
        <div class="dropdown-menu-columns">
          <div class="dropdown-menu-column">
            <a class="dropdown-item" href="{% url 'accordion' %}">
              Accordion
            </a>
            <a class="dropdown-item" href="{% url 'blank_page' %}">
              Blank page
            </a>
            <a class="dropdown-item" href="{% url 'badges' %}">
              Badges
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'buttons' %}">
              Buttons
            </a>
            <div class="dropend">
              <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                Cards
                <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
              </a>
              <div class="dropdown-menu">
                <a href="{% url 'cards' %}" class="dropdown-item">
                  Sample cards
                </a>
                <a href="{% url 'card_actions' %}" class="dropdown-item">
                  Card actions
                  <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                </a>
                <a href="{% url 'cards_masonry' %}" class="dropdown-item">
                  Cards Masonry
                </a>
              </div>
            </div>
            <a class="dropdown-item" href="{% url 'colors' %}">
              Colors
            </a>
            <a class="dropdown-item" href="{% url 'data_grid' %}">
              Data grid
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'datatables' %}">
              Datatables
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'dropdowns' %}">
              Dropdowns
            </a>
            <a class="dropdown-item" href="{% url 'modals' %}">
              Modals
            </a>
            <a class="dropdown-item" href="{% url 'maps' %}">
              Maps
            </a>
            <a class="dropdown-item" href="{% url 'map_fullsize' %}">
              Map fullsize
            </a>
            <a class="dropdown-item" href="{% url 'vector_maps' %}">
              Vector maps
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'navigation' %}">
              Navigation
            </a>
            <a class="dropdown-item" href="{% url 'charts' %}">
              Charts
            </a>
            <a class="dropdown-item" href="{% url 'pagination' %}">
              <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
              Pagination
            </a>
          </div>
          <div class="dropdown-menu-column">
            <a class="dropdown-item" href="{% url 'placeholder' %}">
              Placeholder
            </a>
            <a class="dropdown-item" href="{% url 'steps' %}">
              Steps
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'stars_rating' %}">
              Stars rating
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'tabs' %}">
              Tabs
            </a>
            <a class="dropdown-item" href="{% url 'tables' %}">
              Tables
            </a>
            <a class="dropdown-item" href="{% url 'carousel' %}">
              Carousel
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'lists' %}">
              Lists
            </a>
            <a class="dropdown-item" href="{% url 'typography' %}">
              Typography
            </a>
            <a class="dropdown-item" href="{% url 'offcanvas' %}">
              Offcanvas
            </a>
            <a class="dropdown-item" href="{% url 'markdown' %}">
              Markdown
            </a>
            <a class="dropdown-item" href="{% url 'dropzone' %}">
              Dropzone
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'lightbox' %}">
              Lightbox
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'tinymce' %}">
              TinyMCE
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'inline_player' %}">
              Inline player
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <div class="dropend">
              <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                Authentication
              </a>
              <div class="dropdown-menu">
                <a href="{% url 'login' %}" class="dropdownitem">
                  Sign in
                </a>
                <a href="{% url 'login_link' %}" class="dropdown-item">
                  Sign in link
                </a>
                <a href="{% url 'login_illustration' %}" class="dropdown-item">
                  Sign in with illustration
                </a>
                <a href="{% url 'login_cover' %}" class="dropdown-item">
                  Sign in with cover
                </a>
                <a href="{% url 'register' %}" class="dropdown-item">
                  Sign up
                </a>
                <a href="{% url 'forgot_password' %}" class="dropdown-item">
                  Forgot password
                </a>
                <a href="{% url 'terms_service' %}" class="dropdown-item">
                  Terms of service
                </a>
                <a href="{% url 'lock_screen' %}" class="dropdown-item">
                  Lock screen
                </a>
              </div>
            </div>
            <div class="dropend">
              <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 14l6 0" /></svg>
                Error pages
              </a>
              <div class="dropdown-menu">
                <a href="{% url 'error_404' %}" class="dropdown-item">
                  404 page
                </a>
                <a href="{% url 'error_500' %}" class="dropdown-item">
                  500 page
                </a>
                <a href="{% url 'maintenance' %}" class="dropdown-item">
                  Maintenance page
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{% url 'form_elements' %}" >
        <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
        </span>
        <span class="nav-link-title">
          Form elements
        </span>
      </a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
        <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
        </span>
        <span class="nav-link-title">
          Extra
        </span>
      </a>
      <div class="dropdown-menu">
        <div class="dropdown-menu-columns">
          <div class="dropdown-menu-column">
            <a class="dropdown-item" href="{% url 'empty_page' %}">
              Empty page
            </a>
            <a class="dropdown-item" href="{% url 'cookie_banner' %}">
              Cookie banner
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'activity' %}">
              Activity
            </a>
            <a class="dropdown-item" href="{% url 'gallery' %}">
              Gallery
            </a>
            <a class="dropdown-item" href="{% url 'invoice' %}">
              Invoice
            </a>
            <a class="dropdown-item" href="{% url 'search_results' %}">
              Search results
            </a>
            <a class="dropdown-item" href="{% url 'pricing_cards' %}">
              Pricing cards
            </a>
            <a class="dropdown-item" href="{% url 'pricing_table' %}">
              Pricing table
            </a>
            <a class="dropdown-item" href="{% url 'faq' %}">
              FAQ
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'users' %}">
              Users
            </a>
            <a class="dropdown-item" href="{% url 'license' %}">
              License
            </a>
          </div>
          <div class="dropdown-menu-column">
            <a class="dropdown-item" href="{% url 'logs' %}">
              Logs
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'music' %}">
              Music
            </a>
            <a class="dropdown-item" href="{% url 'photogrid' %}">
              Photogrid
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'tasks' %}">
              Tasks
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'uptime' %}">
              Uptime monitor
            </a>
            <a class="dropdown-item" href="{% url 'widgets' %}">
              Widgets
            </a>
            <a class="dropdown-item" href="{% url 'wizard' %}">
              Wizard
            </a>
            <a class="dropdown-item" href="{% url 'settings' %}">
              Settings
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'trial_ended' %}">
              Trial ended
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'job_listing' %}">
              Job listing
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'page_loader' %}">
              Page loader
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item active dropdown">
      <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
        <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
        </span>
        <span class="nav-link-title">
          Layout
        </span>
      </a>
      <div class="dropdown-menu">
        <div class="dropdown-menu-columns">
          <div class="dropdown-menu-column">
            <a class="dropdown-item" href="{% url 'layout_horizontal' %}">
              Horizontal
            </a>
            <a class="dropdown-item" href="{% url 'layout_boxed' %}">
              Boxed
              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
            </a>
            <a class="dropdown-item" href="{% url 'layout_vertical' %}">
              Vertical
            </a>
            <a class="dropdown-item" href="{% url 'layout_vertical_transparent' %}">
              Vertical transparent
            </a>
            <a class="dropdown-item" href="{% url 'layout_vertical_right' %}">
              Right vertical
            </a>
            <a class="dropdown-item" href="{% url 'layout_condensed' %}">
              Condensed
            </a>
            <a class="dropdown-item" href="{% url 'layout_combined' %}">
              Combined
            </a>
          </div>
          <div class="dropdown-menu-column">
            <a class="dropdown-item" href="{% url 'layout_navbar_dark' %}">
              Navbar dark
            </a>
            <a class="dropdown-item active" href="{% url 'layout_navbar_sticky' %}">
              Navbar sticky
            </a>
            <a class="dropdown-item" href="{% url 'layout_navbar_overlap' %}">
              Navbar overlap
            </a>
            <a class="dropdown-item" href="{% url 'layout_rtl' %}">
              RTL mode
            </a>
            <a class="dropdown-item" href="{% url 'layout_fluid' %}">
              Fluid
            </a>
            <a class="dropdown-item" href="{% url 'layout_fluid_vertical' %}">
              Fluid vertical
            </a>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{% url 'icons' %}" >
        <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
        </span>
        <span class="nav-link-title">
          4158 icons
        </span>
      </a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
        <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
        </span>
        <span class="nav-link-title">
          Help
        </span>
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="https://github.com/app-generator/django-tabler" target="_blank" rel="noopener">
          Download
        </a>
        <a class="dropdown-item" href="https://appseed.us/support/" target="_blank" rel="noopener">
          Support
        </a>
      </div>
    </li>
  </ul>